<template>
  <div>
    <el-row :gutter="20"
            class="goods-top-box">
      <el-col :span="12">
        <el-row class="customer-title">
          <el-col :span="10">
            <div class="title-header">
              <div class="line"></div>
              <h3>货物种类</h3>
            </div>
          </el-col>
          <el-col :span="14"
                  class="text-align">
            <el-button @click="handleFormOpen('addCargoForm')"
                       class="card-btn"
                       icon="el-icon-plus">新增货类</el-button>
            <el-button @click="handleList({path:'/goods/things/cargo',name:'货类种类管理'})"
                       class="card-btn"
                       icon="el-icon-search">快速查询</el-button>
          </el-col>
        </el-row>
        <el-row class="customer"
                border>
          <el-col class="goodsImg">
            <div><img class="iconImg iconSize"
                   src="@/assets/iconImg/goodsType.png"></div>
            货物种类:{{cargoTotal}}种
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row class="customer-title">
          <el-col :span="10">
            <div class="title-header">
              <div class="line"></div>
              <h3>货物属性</h3>
            </div>
          </el-col>
          <el-col :span="14"
                  class="text-align">
            <el-button @click="handleFormOpen('thingAttributeForm')"
                       class="card-btn"
                       v-if="power('WPTMGR_BASEMGR_PORT:ADD')"
                       icon="el-icon-plus">新增货物</el-button>
            <el-button @click="handleList({path:'/goods/things/view',name:'查看货物'})"
                       class="card-btn"
                       v-if="power('WPTMGR_BASEMGR_PORT:QUERY')"
                       icon="el-icon-search">快速查询</el-button>
          </el-col>
        </el-row>
        <el-row class="customer"
                border>
          <el-col :span="16">
            <div id="myChart"
                 :style="{width: '500px', height: '400px'}"></div>
          </el-col>
          <el-col :span="8">
            <el-row class="iconLabel"><img class="iconImg"
                   src="@/assets/iconImg/goodsTotal.png" /><span>货物合计:{{total}}个</span></el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20"
            class="goods-top-box">
      <el-col :span="12">
        <el-row class="customer-title">
          <el-col :span="10">
            <div class="title-header">
              <div class="line"></div>
              <h3>货权控制</h3>
            </div>
          </el-col>
          <el-col :span="14"
                  class="text-align">
            <el-button @click="handleFormOpen('addPropertyControlForm')"
                       class="card-btn"
                       icon="el-icon-plus">新增货权控制</el-button>
            <el-button @click="handleList({path:'/goods/things/propertyControl',name:'货权控制列表'})"
                       class="card-btn"
                       icon="el-icon-search">快速查询</el-button>
          </el-col>
        </el-row>
        <el-row class="customer"
                border>
          <el-col :span="16">
            <div id="myChart2"
                 :style="{width: '500px', height: '400px'}"></div>
          </el-col>
          <el-col :span="8">
            <el-row class="iconLabel"><i class="iconfont">&#xe71f;</i><span>控制货主单位:{{controlCargoCount}}个</span></el-row>
            <el-row class="iconLabel">总结存重量：{{totalCountWeight}}吨</el-row>
            <el-row class="iconLabel">总可用量：{{totalUseWeight}}吨</el-row>
            <el-row class="iconLabel">总放货量：{{totalGoWeight}}吨</el-row>
            <el-row class="iconLabel">总已控制量：{{totalControlWeight}}吨</el-row>
            <el-row class="iconLabel">总质押量：{{totalpledgeWeight}}吨</el-row>
          </el-col>
        </el-row>

      </el-col>
      <el-col :span="12">
        <el-row class="customer-title">
          <el-col :span="10">
            <div class="title-header">
              <div class="line"></div>
              <h3>货权账页管理</h3>
            </div>
          </el-col>
          <el-col :span="14"
                  class="text-align">
            <el-button @click="handleFormOpen('addGoodsAccountPage')"
                       class="card-btn"
                       v-if="power('WPTMGR_BASEMGR_PORT:ADD')"
                       icon="el-icon-plus">新增账页</el-button>
            <el-button @click="handleList({path:'/goods/things/accountPageList',name:'账页列表'})"
                       class="card-btn"
                       v-if="power('WPTMGR_BASEMGR_PORT:QUERY')"
                       icon="el-icon-search">账页列表</el-button>
          </el-col>
        </el-row>
        <el-row class="customer"
                border>
          <el-col :span="16">
            <div id="myChart3"
                 :style="{width: '500px', height: '400px'}"></div>
          </el-col>
          <el-col :span="8">
            <div class="iconLabel">结存总件数： {{accountPageCount.balanceNum}}件</div>
            <div class="iconLabel">结存总数量： {{accountPageCount.balanceCount}}支</div>
            <div class="iconLabel">结存总重量： {{accountPageCount.balanceWeight}}吨</div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20"
            class="goods-top-box">
      <el-col :span="12">
        <el-row>
          <el-col :span="10">
            <div class="title-header">
              <div class="line"></div>
              <h3>货权控制审核</h3>
            </div>
          </el-col>
        </el-row>
        <el-row class="customer customerTwo"
                border>
          <el-col :span="14">
            <el-row><img class="iconImg"
                   src="@/assets/iconImg/noview.png" /><span>未审核:{{noCheckCount}}个</span></el-row>
            <br />
            <el-row><img class="iconImg"
                   src="@/assets/iconImg/back.png" /><span>已退回:{{returnCount}}个</span></el-row>
          </el-col>
          <el-col :span="10"
                  class="button"
                  style="text-align:right;">
            <el-button @click="handleList({path:'/goods/things/auditList',name:'货权控制审核列表'})"
                       class="card-btn"
                       icon="el-icon-search">审核列表</el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="16">
            <div class="title-header">
              <div class="line"></div>
              <h3>货权账页调账</h3>
            </div>
          </el-col>
        </el-row>
        <el-row class="customer customerTwo"
                border>
          <!-- <el-col class="glwztz"> -->
          <!-- <div>库存调整审核：4</div> -->
          <!-- <el-button @click="handleList({path:'/goods/things/stockAdjustReviewList',name:'库存调整审核列表'})"
                       class="card-btn"
                       icon="el-icon-plus">库存调整审核列表</el-button> -->
          <!-- </el-col> -->
          <el-col class="glwztz">
            <el-button @click="handleList({path:'/goods/things/unifyGoodsAccount',name:'统一管理物资调账'})"
                       class="card-btn"
                       icon="el-icon-plus">统一管理物资调账</el-button>
            <!-- <el-button @click="handleList({path:'/goods/things/designatedGoodsAccount',name:'指定管理物资调账'})"
                       class="card-btn"
                       icon="el-icon-plus">指定管理物资调账</el-button> -->
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <component :is="component"
               ref="component"
               @clear="component=''"></component>
  </div>
</template>

<script>
import { getCargoTotal } from '@/api/things/cargo' //货类种类数量
import { getTotal } from '@/api/things/things'
import { getAuditTotal } from '@/api/things/auditList' //审核统计
import { getControlTotal } from '@/api/things/propertyControl' //货权控制统计
import thingAttributeForm from './things/thingAttributeForm' //新增货物
import addCargoForm from './things/addCargoForm' //新增货类
import addPropertyControlForm from './things/addPropertyControlForm' //新增货权控制
import addGoodsAccountPage from './things/addGoodsAccountPage' //新增货权账页

import { getAccountTotal } from '@/api/commerce/account'
import { totalContract } from '@/api/commerce/contract'
import { getAccountPageCount } from '@/api/things/accountPageList'

export default {
  name: 'thingAttribute',
  components: {
    thingAttributeForm,
    addCargoForm,
    addPropertyControlForm,
    addGoodsAccountPage
  },
  data() {
    return {
      ceshiTable: [],
      dialogForm: false,
      component: '',
      total: 0,
      cargoTotal: 0, //货类种类
      noCheckCount: 0, //审核中
      returnCount: 0, //被退回
      controlCargoCount: 0, //控制货主单位
      pledgeCargoCount: 0, //质押模式货主个数
      releaseCargoCount: 0, //放货模式货主个数
      totalControlWeight: 0, //总已控制量
      totalCountWeight: 0, //总结存重量
      totalGoWeight: 0, //总放货量
      totalUseWeight: 0, //总可用量
      totalpledgeWeight: 0, //总质押量

      statistics: {},
      entrustType: '', //新增委托方式
      isAdd: '1',
      verticalData: [],
      controlData: [], //货权控制饼状图
      controlVerticalData: [], //货权控制列
      cakeData: [],
      compactLegend: [], //合同管理：图表列表
      compactInnerData: [],
      compactOutData: [],
      accountPageCount: {}
    }
  },
  mounted() {
    //获取货类总数
    getCargoTotal().then(res => {
      this.cargoTotal = res.data
    })
    //货权控制统计
    getControlTotal().then(res => {
      this.controlVerticalData = ['质押模式', '放货模式']
      this.controlData.push(
        {
          value: res.data.pledgeCargoCount,
          name: '质押模式'
        },
        {
          value: res.data.releaseCargoCount,
          name: '放货模式'
        }
      )
      this.controlCargoCount = res.data.controlCargoCount //控制货主单位
      this.totalControlWeight = res.data.totalControlWeight //总已控制量
      this.totalCountWeight = res.data.totalCountWeight //总结存重量
      this.totalGoWeight = res.data.totalGoWeight //总放货量
      this.totalUseWeight = res.data.totalUseWeight //总可用量
      this.totalpledgeWeight = res.data.totalpledgeWeight //总质押量
    })
    //货权审核统计
    getAuditTotal().then(res => {
      this.noCheckCount = res.data.noCheckCount
      this.returnCount = res.data.returnCount
    })
    window.addEventListener('storage', val => {
      let key = val.key
      let msg = JSON.parse(val.newValue)
      if (key === 'message') {
        this.loadData()
      }
    })
    this.loadData()

    // 货物属性饼状图
    getTotal().then(res => {
      this.total = res.data.totalCount
      for (let i = 0; i < res.data.statistics.length; i++) {
        this.verticalData.push(res.data.statistics[i].cargoName)
        this.cakeData.push({
          value: res.data.statistics[i].count,
          name: res.data.statistics[i].cargoName
        })
      }
      this.drawLine()
    })
    //获取账页统计
    getAccountPageCount().then(res => {
      this.accountPageCount = res.data
      ;(this.compactInnerData = [
        {
          value: this.accountPageCount.unifiedTotalWeight,
          name: '统一管理'
        },
        {
          value: this.accountPageCount.pointTotalWeight,
          name: '指定管理'
        }
      ]),
        (this.compactOutData = [
          {
            value: this.accountPageCount.unifiedCullWeight,
            name: '检尺'
          },
          {
            value: this.accountPageCount.unifiedIdentifyWeight,
            name: '标识'
          },
          {
            value: this.accountPageCount.unifiedWeighingWeight,
            name: '检斤'
          },
          {
            value: this.accountPageCount.pointCullWeight,
            name: '检尺'
          },
          {
            value: this.accountPageCount.pointIdentifyWeight,
            name: '标识'
          },
          {
            value: this.accountPageCount.pointWeighingWeight,
            name: '检斤'
          }
        ])
      this.drawLine()
    })
  },
  methods: {
    loadData() {},
    // 新增货物
    handleFormOpen(ref) {
      this.component = ref
      this.$nextTick(() => {
        this.$refs.component.dialogForm = true
      })
    },
    // 列表快速查询
    handleList(url) {
      this.$store.commit('ADD_CACHED_VIEWS', url)
      this.$router.push(url.path)
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
      let myChart3 = this.$echarts.init(document.getElementById('myChart3'))

      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: this.verticalData
        },
        series: [
          // {
          //   name: '访问来源',
          //   type: 'pie',
          //   selectedMode: 'single',
          //   radius: [0, '30%']
          // },
          {
            name: '',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              normal: {
                show: false,
                position: 'center'
                // backgroundColor: '#eee',
                // borderColor: '#aaa',
                // borderWidth: 1,
                // borderRadius: 4,
                // rich: {
                //   a: {
                //     color: '#999',
                //     lineHeight: 22,
                //     align: 'center'
                //   },
                //   hr: {
                //     borderColor: '#aaa',
                //     width: '100%',
                //     borderWidth: 0.5,
                //     height: 0
                //   },
                //   b: {
                //     fontSize: 16,
                //     lineHeight: 33
                //   },
                //   per: {
                //     color: '#eee',
                //     backgroundColor: '#334455',
                //     padding: [2, 4],
                //     borderRadius: 2
                //   }
                // }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            data: this.cakeData
          }
        ]
      }
      let option2 = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: this.controlVerticalData
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%']
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              normal: {
                show: false,
                position: 'center'
                // backgroundColor: '#eee',
                // borderColor: '#aaa',
                // borderWidth: 1,
                // borderRadius: 4,
                // rich: {
                //   a: {
                //     color: '#999',
                //     lineHeight: 22,
                //     align: 'center'
                //   },
                //   hr: {
                //     borderColor: '#aaa',
                //     width: '100%',
                //     borderWidth: 0.5,
                //     height: 0
                //   },
                //   b: {
                //     fontSize: 16,
                //     lineHeight: 33
                //   },
                //   per: {
                //     color: '#eee',
                //     backgroundColor: '#334455',
                //     padding: [2, 4],
                //     borderRadius: 2
                //   }
                // }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            data: this.controlData
          }
        ]
      }
      let option3 = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left'
          // data: this.compactLegend
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.compactInnerData
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              normal: {
                backgroundColor: '#eee',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              }
            },
            data: this.compactOutData
          }
        ]
      }
      this.$nextTick(function() {
        myChart.setOption(option)
        myChart2.setOption(option2)
        myChart3.setOption(option3)
      })
    }
  }
}
</script>

<style scoped lang="scss">
@font-face {
  font-family: 'iconfont'; /* project id 1072096 */
  src: url('//at.alicdn.com/t/font_1072096_52yp62odpox.eot');
  src: url('//at.alicdn.com/t/font_1072096_52yp62odpox.eot?#iefix')
      format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1072096_52yp62odpox.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1072096_52yp62odpox.woff') format('woff'),
    url('//at.alicdn.com/t/font_1072096_52yp62odpox.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1072096_52yp62odpox.svg#iconfont') format('svg');
}
.iconfont {
  color: #66b1ff;
  font-family: 'iconfont' !important;
  font-size: 26px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.title-header {
  width: 90%;
  display: flex;
  height: 30px;
  margin-bottom: 20px;
}
h3 {
  margin-left: 10px;
}
.line {
  border-left: solid 5px #00a1ff;
  height: 18px;
  margin-top: 5px;
}
.customer {
  border: 1px solid #eee;
  margin-right: 20px;
}
.customerTwo {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  height: 122px;
}
.customer-title {
  margin-right: 20px;
}
.goodsImg {
  text-align: center;
  height: 400px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 15px;
}

.items {
  margin-top: 15px;
  cursor: pointer;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.card-body-flex {
  display: flex;
  justify-content: space-between;
  i {
    font-size: 20px;
  }
}

.box-data {
  width: 50%;
  border-right: 1px solid #ccc;
}

.flexWarp {
  display: flex;
  flex-wrap: wrap;
}

/*  添加样式 */

.goods-top-box {
  margin-bottom: 30px;
}

.items-li {
  float: left;
  text-align: center;
  font-size: 14px;
  padding-right: 30px;
  cursor: pointer;
}

.items-li i {
  font-size: 28px;
  color: blue;
}

.items-li p span {
  padding-left: 5px;
  color: #ff0000;
}
.iconImg {
  margin-bottom: -10px;
  margin-right: 5px;
}
.glwztz {
  padding-top: 20px;
  text-align: center;
  // display: flex;
  // justify-content: space-around;
}
.iconSize {
  width: 200px;
  margin: 30px 0;
}
.iconLabel {
  margin-top: 20px;
}
.button {
  line-height: 80px;
}
</style>

